<template>
  <div class="login-container">
    <div class="login-box">
      <div class="avatar-box">
        <img class="avatar" src="../assets/vue.svg" alt="">
      </div>
      <div class="form-login">
        <div class="form-group">
          <label for="username">登录用户：</label>
          <input type="text" 
          id="username" 
          class="form-control" 
          placeholder="请输入用户名" 
          autocomplete="off"
          v-model.trim="username">
        </div>
        <div class="form-group">
          <label for="password">登录密码：</label>
          <input type="password" 
          id="password" 
          class="form-control" 
          placeholder="请输入密码" 
          autocomplete="off"
          v-model="password">
        </div>
        <div class="form-group">
          <button type="button" class="btn" @click="onLogin">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();// 初始化一个router实例
const username = ref('')
const password = ref('')
const onLogin = () => {
  if (username.value === 'admin' && password.value === '123456') {
    alert('登录成功')
    router.push('/home')
    localStorage.setItem('token', 'Bearer xxxx')
    // 1.路由跳转到后台首页 2. 存储用户的登录信息token
  } else {
    // 1. 提示用户登录失败 2. 消除用户的登录信息
    alert('登录失败')
    localStorage.removeItem('token')
  }
}
</script>

<style></style>